/* SPDX-License-Identifier: Apache-2.0 */

/*
  A block for highlighting important information:

  // Basic component
  <div class="callput-block">
    <h3 class="callout-block__heading">Optional Heading</h3>
    // Any important message here.
  </div>

  // Dismissable
    - Add data attributes to connect to JS script
    - Add ARIA labels to close button

  <div class="callout-block" data-controller="dismissable" data-dismissable-identifier="releases">
    <button type="button" title="Dismiss" data-action="click->dismissable#dismiss" class="callout-block__dismiss" aria-label="Close">
      <i class="fa fa-times" aria-hidden="true"></i>
    </button>
    <h3 class="callout-block__heading">Optional Heading</h3>
    // Any important message here.
  </div>

  Modifiers:
    - neutral: Makes border grey
    - danger: Makes border red
    - warning: Makes border brown
    - success: Makes border green
    - message: Custom styles for messaging UI
    - bottom-margin: Adds extra margin below the callout

  // Collapsible
    - Use <details> and <summary> instead of <div> and <h3>
    - Use data-controller="collapsible" to save settings as a cookie
      - data-collapsible-identifer="foo_bar" is required
      - data-action="click->collapsible#save" is required
    - Add data-collapsible-setting="global" to persist across whole site
      - Without "global" the setting persists for specific pages only
    - Add open attribute to open callout block by default

  <details class="callout-block" data-controller="collapsible" data-collapsible-identifier="foo_bar" data-collapsible-setting="global" open>
    <summary class="callout-block__heading data-action="click->collapsible#save">Required Heading</summary>
    // Any important message here.
  </details>
*/

.callout-block {
  padding: 15px 15px 15px 30px;
  border: 2px solid $primary-color;
  margin: 15px 0;
  position: relative;
  border-radius: 4px;

  &__dismiss {
    @include dismiss-button;
  }

  &__heading {
    @include h3;

    details & {
      padding: 15px;
      margin: -15px;
      cursor: pointer;
    }

    details[open] & {
      margin-bottom: 0;
    }
  }

  &::before {
    content: "";
    width: 15px;
    background-color: $primary-color;
    position: absolute;
    top: -1px;
    left: -2px;
    height: calc(100% + 2px);
    border-radius: 3px 0 0 3px;
  }

  &__right {
    float: right;

    &::before {
      width: 0;
    }

    &::after {
      content: "";
      width: 15px;
      background-color: $primary-color;
      position: absolute;
      top: -1px;
      right: -2px;
      height: calc(100% + 2px);
      border-radius: 0 3px 3px 0;
    }
  }

  &--neutral {
    border-color: $border-color;

    &::before {
      background-color: $border-color;
    }

    &::after {
      background-color: $border-color;
    }
  }

  &--danger {
    border-color: $danger-color;

    > :not(.modal, .button) {
      color: $danger-color;

      a:not(.button) {
        @include danger-underlined-link;
      }
    }

    &::before {
      background-color: $danger-color;
    }

    .callout-block__dismiss {
      @include link-focus-state($danger-color);
    }
  }

  &--warning {
    border-color: $warning-color;

    > :not(.modal, .button) {
      color: $warning-color;

      a:not(.button) {
        @include warning-underlined-link;
      }
    }

    &::before {
      background-color: $warning-color;
    }

    .callout-block__dismiss {
      @include link-focus-state($warning-color);
    }
  }

  &--success {
    border-color: $success-color;

    > :not(.modal, .button) {
      color: $success-color;

      a:not(.button) {
        @include success-underlined-link;
      }
    }

    &::before {
      background-color: $success-color;
    }

    .callout-block__dismiss {
      @include link-focus-state($success-color);
    }
  }

  &--message {
    display: inline-block;
    max-width: 75%;
    margin: 10px 0;

    @media only screen and (max-width: $mobile) {
     max-width: 85%;
    }
  }

  &--bottom-margin {
    margin-bottom: $half-spacing-unit;
  }

  &--dismissed {
    display: none;
  }
}
